import { useMemo, useState, useEffect } from 'react'
import styles from './index.module.less';
import ReactEcharts from 'echarts-for-react';
import { reSetData } from '@/utils/tool';
const colors = ['#0091FF', '#FA6400', '#00FFFF', '#6f7de3', '#088DFF', '#FF916C', '#FF9933', '#9E5CFF', '#F88CFF'];
const Lines = ({
    data,
    legendShow = true,
    grid = {
        top: "17%",
        bottom: '10%',
        left: '1%',
        right: '1%',
    },
    splitLineShow = true,
    splitLineLineStyleType = 'dashed',
    yAxisAxisLabelFormatter = (value) => {
        return value
    },
    yAxisPosition = 'left',
    tooltipShow = 'false',
    tooltipFormatter = (params) => {
        let today = null
        let yest = null
        let contStr = ``
        if (params && params.length) {
            contStr = params.map(it => {
                return `<div style="
                font-family: PingFang SC;
                font-size: .375rem;
                color: rgba(0, 0, 0, 0.65);
                display:flex;
                align-items:center;
                justify-content: space-between;
                "><div>${it.seriesName}：</div>
                <div>${ it.value && parseFloat(it.value).toFixed(2) || ''}</div>
                </div>  `
            })
        }
        let str1 = ` <div style="
        font-family: PingFang SC;
        font-size: .375rem;
        color: rgba(0, 0, 0, 0.65);
        display:flex;
        align-items:center;
        margin-bottom:.2175rem;
        justify-content: space-between;
        "><div>${params[0].name}</div>
        </div> `

        const htmlStr = `<div style="
        display:flex;
        flex-direction:column;
        justify-content: space-between;
        width:2.6875rem;
        background-color:#fff;
        box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
        border-radius: .375rem;
        padding:.3125rem;
        box-sizing: border-box;
        ">

        `;
        let str2 = ` </div>`
        return htmlStr + str1 + contStr + str2;
    },
    xAxisInterval = 5,
    yAxisName = '',
    chartSize
}) => {
    const { xAxis = [], lineData = [], time = [] } = data;
    // console.log(lineData,'lineData')
    let seriesData = [];
    let seriesXAxis = [];
    let seriesYAxis = {};
    if(yAxisName.includes('ms')){
        seriesYAxis = {
            name: yAxisName,
            nameTextStyle: {
                color: "rgba(0, 0, 0, 0.65)",
                nameLocation: "start",
                padding:[10,0]
            },
            type: "value",
            position: yAxisPosition,//坐标轴位置，移至右边
            scale: true,
            minInterval: 1,
            splitNumber:2,
            min:0,
            splitLine: {
                show: splitLineShow,
                lineStyle: {
                    color: 'rgb(217, 217, 217)',
                    width: 1,
                    type: splitLineLineStyleType,
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(56, 145, 255, 0.4)',
                    width: 1
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(0, 0, 0, 0.65)',
                    fontSize: 12
                },
                formatter: yAxisAxisLabelFormatter
            }

        }
    }else{
        seriesYAxis = {
            name: yAxisName,
            nameTextStyle: {
                color: "rgba(0, 0, 0, 0.65)",
                nameLocation: "start",
                padding:[10,0]
            },
            type: "value",
            position: yAxisPosition,//坐标轴位置，移至右边
            scale: true,
            minInterval: 1,
            splitNumber:2,
            min:0,
            max:'100',
            splitLine: {
                show: splitLineShow,
                lineStyle: {
                    color: 'rgb(217, 217, 217)',
                    width: 1,
                    type: splitLineLineStyleType,
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(56, 145, 255, 0.4)',
                    width: 1
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(0, 0, 0, 0.65)',
                    fontSize: 12
                },
                formatter: yAxisAxisLabelFormatter
            }

        }
    }

    const options = useMemo(() => {
        let sliceArrValue = []
        if (xAxis && xAxis.length && xAxisInterval !== 0) {
            const sliceArr = reSetData(xAxis, xAxisInterval)
            sliceArr.map((item, index) => {
                if (item.length && item.length == xAxisInterval) {
                    sliceArrValue.push(item[xAxisInterval - 1])
                } else {
                    sliceArrValue.push(item[item.length - 1])
                }
            })
        } else {
            sliceArrValue = xAxis
        }
        let val1 = lineData[0] && lineData[0].value || [];
        let val2 = lineData[1] && lineData[1].value || [];
        seriesData = lineData.map((item, index) => {
            let arr1 = [];
            let arr2 = [];
            time.map((e1,indexs) => {
                if(parseFloat(val1[indexs]) >= parseFloat(val2[indexs]) || val2[indexs]==undefined){
                    arr1.push({value:val1[indexs],position:'top'})
                    arr2.push({value:val2[indexs],position:'bottom'})
                }else{
                    arr1.push({value:val1[indexs],position:'bottom'})
                    arr2.push({value:val2[indexs],position:'top'})
                }
            })
            return {
                name: item.name,
                type: "line",
                symbolSize: 4,
                // symbol:'circle',
                z:item.name == '昨日' ? 1:9,
                symbol: function (value, params) {
                    // console.log('params',params);
                    if (params.dataIndex % 4 === 0) {
                        return 'circle'
                    } else {
                        return 'none'; //拐点不显示
                    }
                },
                itemStyle: {
                    // width: 1,
                    // color: colors[index],
                    normal: {
                        color: colors[index],
                        label: {
                            show: true, //开启显示
                            // position: 'top', //在上方显示
                            formatter:function(e){
                                // console.log(e,'indexs')
                                let {data, value} = e;
                                let num = parseFloat(value) || 0;
                                let arr = data.position == 'bottom' ? '{bottom|'+num.toFixed(2) +'}' : num.toFixed(2);
                                // let num = parseFloat(e.value) || 0;
                                
                                // return num.toFixed(0);
                                return arr;
                            },
                            textStyle: { //数值样式
                                color: 'rgb(21, 70, 106)',
                                fontSize: 10,
                                rich:{
                                    bottom:{
                                        padding:[0,0,-35,0],
                                        fontSize: 10,
                                    }
                                }
                            }
                        },
                        lineStyle: {
                            normal: {
                                color: colors[index],
                            }
                        }
                    }
                },
                // data: item.value
                data: index == 0 ? arr1 : arr2
            }
        });
        seriesXAxis = xAxis.map((item, index) => {
            let timeLength = time.length
            return {
                type: 'category',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(56, 145, 255, 0.4)',
                        width: 1
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: index == 0 ? true : false,
                    interval: timeLength > 200 ? 59 : xAxisInterval,//interval为x轴两相邻数据之间所包含数据条数
                    showMinLabel: true,//显示最小值
                    showMaxLabel: true,//显示最大值
                    margin:15,
                    formatter: function (value) {
                        let valueTxt = '';
                        if (value.length > 16) {
                            valueTxt = value.substring(0, 16) + '...';
                        }
                        else {
                            valueTxt = value;
                        }
                        return valueTxt;
                    },
                    textStyle: {
                        color: 'rgba(0, 0, 0, 0.65)',
                        fontSize: 12,
                        itemWidth: 60,
                    },
                },
                // prettier-ignore
                data: time

            }
        })

        return {
            tooltip: {
                show: tooltipShow,
                trigger: "axis",
                backgroundColor: 'rgba(30,144,255,0.7)',
                borderColor: '#1E90FF',
                triggerOn: "mousemove|click",
                borderWidth: 0,
                // alwaysShowContent: true,
                padding: 0,
                borderRadius: '.375rem',
                backgroundColor: 'rgba(0, 0, 0, 0)',
                confine: true,
                className: styles['echarts-tooltip'],
                textStyle: {
                    color: '#fff'
                },
                formatter: tooltipFormatter,
            },
            legend: {
                show: legendShow,
                align: 'right',
                left: '65%',//距离左边距
                itemWidth: 16,//图标宽
                itemHeight: 8,//图标高
                // icon:"arrow",
                data: [
                    {
                        icon: "image://",
                        name: lineData[0]?.name || ''
                    },
                    {
                        icon: "image://",
                        name: lineData[1]?.name || ''
                    }
                ],
                textStyle: {
                    color: "rgba(0, 0, 0, 0.5)",
                    fontSize: 12,
                },
            },
            grid: {
                ...grid,
                containLabel: true
            },
            xAxis: seriesXAxis,
            yAxis: seriesYAxis,
            series: seriesData
        };
    }, [data]);

    return (
        <div className={styles.echarts} id='chart'>
            {chartSize && time.length ? <ReactEcharts
                style={{
                    position: 'absolute',
                    width: chartSize.width || '100%',
                    height: chartSize.height || '100%',
                    // width: '365px',
                    // height: '147px',
                }}
                option={options}
                animation={false}
                opts={{ devicePixelRatio: 2 }}
            /> : <div className={styles.noData}>暂无数据</div>}
            {/* {
                !xAxis.length && <div className={styles.noData}>暂无数据</div>
            } */}
        </div>
    );
}

export default Lines